<template>
  <div class="dashboard-container">
    <page-tool>
      <!-- 前面内容 -->
      <template v-slot:left>
        <div style="display:flex;">
          <img
            style="margin-right:10px;width:50px;height:50px;border-radius:50%"
            :src="userInfo.staffPhoto"
          >
          <div>
            <h2>早安,{{ userInfo.username }},祝你开心每一天</h2>
            <p>
              {{ userInfo.username }} |
              {{ $store.getters.userInfo.company }} ~总裁办
            </p>
          </div>
        </div>
      </template>
    </page-tool>

    <el-row :gutter="40">
      <el-col :span="14">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>工作日历</span>
          </div>
          <workCalendar />
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
            >操作按钮</el-button>
          </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <!-- 审批流程 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span
              style="padding:10px ;border-bottom:4px  solid  purple"
            >流程申请</span>
          </div>
          <el-row class="approvals" :gutter="20">
            <el-col
              :span="8"
            ><el-button
              size="medium"
              @click="dialogFormVisible = true"
            >加班离职</el-button>
            </el-col>
            <el-col
              :span="8"
            ><el-button size="medium">请假调休</el-button>
            </el-col>
            <el-col
              :span="8"
            ><el-button
              size="medium"
              @click="$router.push('/users/approvals')"
            >审批列表</el-button>
            </el-col>
            <el-col
              :span="8"
            ><el-button size="medium">我的信息</el-button>
            </el-col>
          </el-row>
        </el-card>

        <!-- 雷达图 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>绩效指数</span>
          </div>
          <!-- 雷达图组件 -->
          <radar />
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
            >操作按钮</el-button>
          </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 审批申请 -->
    <el-dialog title="申请" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="申请类型" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-select
              v-model="form.processName"
              style="width:100%"
              placeholder="请选择活动区域"
            >
              <el-option label="离职" value="离职" />
              <el-option label="加班" value="加班" />
            </el-select> </el-col>=={{ form.processName }}
        </el-form-item>

        <el-form-item
          v-if="isCheckFire"
          label="加班开始时间"
          :label-width="formLabelWidth"
        >
          <el-col :span="11">
            <el-date-picker
              v-model="form.start_time"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
            /> </el-col>=={{ form.start_time | formatTime() }}
        </el-form-item>
        <!-- 期望离职时间 -->
        <el-form-item v-else label="期望离职时间" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker
              v-model="form.start_time"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
            /> </el-col>=={{ form.start_time | formatTime() }}
        </el-form-item>
        <!-- 期望离职时间 -->

        <el-form-item
          v-if="isCheckFire"
          label="加班结束时间"
          :label-width="formLabelWidth"
        >
          <el-col :span="11">
            <el-date-picker
              v-model="form.end_time"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
            /> </el-col>=={{ form.end_time | formatTime() }}
        </el-form-item>

        <el-form-item
          v-if="isCheckFire"
          label="补偿方式"
          :label-width="formLabelWidth"
        >
          调休
        </el-form-item>

        <el-form-item
          :label="form.processName + '原因'"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.reason" type="textarea" />=={{ form.reason }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
        ==={{ $store.getters.userId }}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import workCalendar from './components/work-calendar.vue'

import radar from './components/radar.vue'

import { addProcess } from '@/api/user'

import { getUserPermission } from '@/api/employees'

import dayjs from 'dayjs'
export default {
  components: {
    workCalendar,
    radar
  },
  data() {
    return {
      src: 'require(this.$store.getters.avatar)',
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        processName: '加班',
        start_time: '',
        end_time: '',
        reason: '',
        processKey: 'process_overtime'
      },
      formLabelWidth: '120px',
      userInfo: {}
    }
  },
  computed: {
    isCheckFire() {
      return this.form.processName === '加班'
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async add() {
      this.form.start_time = this.tt(this.form.start_time)
      this.form.end_time = this.tt(this.form.end_time)
      const res = await addProcess(this.form)
      console.log(res, 2222)
    },
    tt(date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },

    async getInfo() {
      this.userInfo = await getUserPermission(this.$store.getters.userId)
      this.$store.commit('user/SET_AVATAR', this.userInfo.staffPhoto)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  .el-row {
    .el-col {
      ::v-deep .el-card {
        margin-bottom: 20px;
      }
    }
  }

  .bg-purple {
    background: #d3dce6;
  }
  .approvals {
    .el-col {
      padding: 10px 6px;
      .el-button {
        width: 100%;
        padding: 18px;
      }
    }
  }
}
</style>
